<template>

  <el-card>


    <el-row>
      <el-col :span="12" class="echarts-table">
        <el-descriptions title="本月支出、收入数量以及笔数" :column="2" :size="size" border>
          <el-descriptions-item label="月支出金额">{{monthlyExpenditure.data.expenditure}}</el-descriptions-item>
          <el-descriptions-item label="月收入金额">{{monthlyExpenditure.data.income}}</el-descriptions-item>
          <el-descriptions-item label="月支出的笔数">{{monthlyExpenditure.data.expenditureNum}}</el-descriptions-item>
          <el-descriptions-item label="月收入的笔数">{{monthlyExpenditure.data.incomeNum}}</el-descriptions-item>
        </el-descriptions>

        <el-table
          :data="monthlyExpenditurePerson.data"
          border
          style="width: 100%">
          <el-table-column
            prop="userName"
            label="家庭人员"
            >
          </el-table-column>
          <el-table-column
            prop="expenditure"
            label="支出总金额"
          >
          </el-table-column>
          <el-table-column
            prop="income"
            label="收入总金额"
          >
          </el-table-column>
          <el-table-column
            prop="surplus"
            label="盈余(收入-支出)"
          >
          </el-table-column>
          <el-table-column
            prop="expenditureNum"
            label="支出笔数"
          >
          </el-table-column>
          <el-table-column
            prop="incomeNum"
            label="收入笔数"
          >
          </el-table-column>
        </el-table>
      </el-col>

      <el-col :span="12">
        <div class="echarts-title">本月支出、收入数量以及笔数</div>
        <!--本月支出、收入 饼图 -->
        <div id="monthlyExpenditure" class="echarts-content"></div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <div class="echarts-title">本月每个家庭成员的支出情况</div>
        <div id="monthlyExpenditurePerson" style="width: 100%; height: 600px"></div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <!--月度收入分类情况 -->
        <div id="monthlyRevenueClassification" class="echarts-content"></div>
      </el-col>

      <el-col :span="12">
        <!--月度的支出分类情况 -->
        <div id="monthlyExpenditureClassification" class="echarts-content"></div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <!--月度支出分类笔数-->
        <div class="echarts-title">月度支出类型笔数</div>
        <div id="monthlyExpenditureClassificationTransactions" class="echarts-content"></div>
      </el-col>
      <el-col :span="12">
        <!--本月内每天的支出数量和笔数-->
        <div class="echarts-title">本月内每天的支出数量和笔数</div>
        <div id="monthlyExpenditureTrend" class="echarts-content"></div>
      </el-col>
    </el-row>


  </el-card>

</template>

<script>

  /*
    全局引入echar import * as echarts from 'echarts'
    Vue.prototype.$echarts=echarts
    初始化  let myChart = this.$echarts.init(DOM)
  * */

  // 局部引入
  import * as echarts from 'echarts'
  // import echarts from 'echarts'
  import http from '@/utils/http'

  export default {
    // 月度账单统计
    name: "MonthlyBill",
    data(){
      return {
        size: 'mini',
        // 月总统计
        monthlyExpenditure: {
          // 原始数据
          data: {},
          // 支出的笔数
          expenditureNum: 0,
          // 收入的笔数
          incomeNum: 0,
          // 总的支出金额
          expenditure: 0,
          // 总的收入金额
          income: 0,
        },
        // 月度收入分类情况
        monthlyRevenueClassification: {
          // 类似数据 ['张三', '李四', '王五']
          legendData: [],
          // 类似  [{name:'张三', value:300}, {name:'李四', value:300},{name:'王五', value:300},],
          seriesData: [],
        },
        // 月度的支出分类情况
        monthlyExpenditureClassification: {
          // 类似数据 ['张三', '李四', '王五']
          legendData: [],
          // 类似  [{name:'张三', value:300}, {name:'李四', value:300},{name:'王五', value:300},],
          seriesData: [],
        },
        // 月度支出分类每笔笔数
        monthlyExpenditureClassificationTransactions: {
          xAxisData: [],
          seriesData: []
        },
        // 本月内每天的支出数量和笔数
        monthlyExpenditureTrend: {
          // 每天的日期
          time: [],
          // 支出的金额
          seriesExpenditure: [],
          // 支出的笔数
          seriesExpenditureNum: [],
        },
        // 本月每个家庭成员的支出、收入、笔数
        monthlyExpenditurePerson: {
          // 原始数据
          data: [],
          // 标题部分，指示每个颜色的含义
          legendData: [],
          // 支出金额
          seriesExpenditure: [],
          // 支出笔数
          seriesExpenditureNum: [],
        }
      }
    },
    methods: {
      /**
       * 初始化 本月每个家庭成员的支出、收入、笔数
       */
      initMonthlyExpenditurePerson(){
        let myChart = echarts.init(document.getElementById('monthlyExpenditurePerson'));
        let option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            data: this.monthlyExpenditurePerson.legendData
          },
          series: [
            {
              name: '支出详情',
              type: 'pie',
              selectedMode: 'single',
              radius: [0, '30%'],
              label: {
                position: 'inner',
                fontSize: 14
              },
              labelLine: {
                show: false
              },
              data: this.monthlyExpenditurePerson.seriesExpenditure
            },
            {
              name: '笔数详情',
              type: 'pie',
              radius: ['45%', '60%'],
              labelLine: {
                length: 30
              },
              label: {
                formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                backgroundColor: '#F6F8FC',
                borderColor: '#8C8D8E',
                borderWidth: 1,
                borderRadius: 4,
                rich: {
                  a: {
                    color: '#6E7079',
                    lineHeight: 22,
                    align: 'center'
                  },
                  hr: {
                    borderColor: '#8C8D8E',
                    width: '100%',
                    borderWidth: 1,
                    height: 0
                  },
                  b: {
                    color: '#4C5058',
                    fontSize: 14,
                    fontWeight: 'bold',
                    lineHeight: 33
                  },
                  per: {
                    color: '#fff',
                    backgroundColor: '#4C5058',
                    padding: [3, 4],
                    borderRadius: 4
                  }
                }
              },
              data: this.monthlyExpenditurePerson.seriesExpenditureNum
            }
          ]
        };
        myChart.setOption(option)
      },
      /**
       * 获取本月每个家庭成员的支出、收入、笔数
       */
      getMonthlyExpenditurePerson(){
        http.get("/bill/getMonthlyExpenditurePerson", {}).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          if (res.data){
            let legendData = []
            // 支出
            let seriesExpenditure = []
            // 支出笔数
            let seriesExpenditureNum = []
            for (let obj of res.data){
              // 循环支出的
              legendData.push(obj.userName + "支出金额")
              let expenditure = {'value': obj.expenditure, 'name': obj.userName + "支出金额"}
              seriesExpenditure.push(expenditure)

              // 循环笔数
              legendData.push(obj.userName + "支出笔数")
              let expenditureNum = {'value': obj.expenditureNum, 'name': obj.userName + "支出笔数"}
              seriesExpenditureNum.push(expenditureNum)
            }

            this.monthlyExpenditurePerson.data = res.data
            this.monthlyExpenditurePerson.legendData = legendData
            this.monthlyExpenditurePerson.seriesExpenditure = seriesExpenditure
            this.monthlyExpenditurePerson.seriesExpenditureNum = seriesExpenditureNum
          }
          this.initMonthlyExpenditurePerson()

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 初始化本月内每天的支出数量和笔数
       */
      initMonthlyExpenditureTrend(){
        let myChart = echarts.init(document.getElementById('monthlyExpenditureTrend'));
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          legend: {
            data: ['支出金额', '支出笔数']
          },
          xAxis: [
            {
              type: 'category',
              data: this.monthlyExpenditureTrend.time,
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '支出金额',
              min: 0,
              // 会限制最高是多少
              max: 1800,
              // 步进数
              interval: 200,
              axisLabel: {
                formatter: '{value} 元'
              }
            },
            {
              type: 'value',
              name: '支出笔数',
              min: 0,
              max: 15,
              interval: 5,
              axisLabel: {
                formatter: '{value} 笔'
              }
            }
          ],
          series: [
            {
              name: '支出金额',
              yAxisIndex: 0, // 设置数据对齐yAxis 第一个y轴
              // type: 'bar',
              type: 'bar',
              tooltip: {
                valueFormatter: function (value) {
                  return value + ' 元';
                }
              },
              data: this.monthlyExpenditureTrend.seriesExpenditure
            },
            {
              name: '支出笔数',
              yAxisIndex: 1, // // 设置数据对齐yAxis 第二个y轴
              type: 'line',
              tooltip: {
                valueFormatter: function (value) {
                  return value + ' 笔';
                }
              },
              data: this.monthlyExpenditureTrend.seriesExpenditureNum
            },

          ]
        };
        myChart.setOption(option)
      },
      /**
       * 获取本月内每天的支出数量和笔数
       */
      getMonthlyExpenditureTrend(){
        http.get("/bill/getMonthlyExpenditureTrend", {}).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          if (res.data){
            // 日期
            let time = []
            let seriesExpenditure = []
            let seriesExpenditureNum = []
            for (let obj of res.data){
              time.push(obj.triggerTime)
              seriesExpenditure.push(obj.price)
              seriesExpenditureNum.push(obj.countPrice)
            }

            this.monthlyExpenditureTrend.time = time
            this.monthlyExpenditureTrend.seriesExpenditure = seriesExpenditure
            this.monthlyExpenditureTrend.seriesExpenditureNum = seriesExpenditureNum
          }

          this.initMonthlyExpenditureTrend()

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 月度支出分类笔数
       */
      initMonthlyExpenditureClassificationTransactions(){
        let myChart = echarts.init(document.getElementById('monthlyExpenditureClassificationTransactions'));
        let option = {
          xAxis: {
            type: 'category',
            data: this.monthlyExpenditureClassificationTransactions.xAxisData,
            axisLabel: {
              //x轴文字的配置
              show: true,
              interval: 0,//使x轴文字显示全
              // 使用formatter 换行显示
              formatter: function(params) {
                let newParamsName = "";
                let paramsNameNumber = params.length;
                let provideNumber = 3; //一行显示几个字
                let rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                if (paramsNameNumber > provideNumber) {
                  for (let p = 0; p < rowNumber; p++) {
                    let tempStr = "";
                    let start = p * provideNumber;
                    let end = start + provideNumber;
                    if (p == rowNumber - 1) {
                      tempStr = params.substring(start, paramsNameNumber);
                    } else {
                      tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr;
                  }
                } else {
                  newParamsName = params;
                }
                return newParamsName;
              }
            },
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: this.monthlyExpenditureClassificationTransactions.seriesData,
              type: 'bar'
            }
          ]
        };
        myChart.setOption(option)
      },
      /**
       * 初始化月度的支出分类情况
       */
      initMonthlyExpenditureClassification(){
        let myChart = echarts.init(document.getElementById('monthlyExpenditureClassification'));
        let option = {
          title: {
            text: '月度支出分类类型',
            subtext: '支出/元',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            data: this.monthlyExpenditureClassification.legendData
          },
          series: [
            {
              name: '分类名称',
              type: 'pie',
              radius: '55%',
              center: ['40%', '50%'],
              data: this.monthlyExpenditureClassification.seriesData,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        myChart.setOption(option)
      },
      /**
       * 月度的支出分类情况
       */
      getMonthlyExpenditureClassification(){
        http.get("/bill/getMonthlyExpenditureClassification", {}).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          if (res.data){
            // 分类
            let title = []
            // 分类，金额
            let content = []
            // 支出笔数
            let transactionsData = []
            for (let billGroupExpenses of res.data){
              title.push(billGroupExpenses.typeName)
              let obj = {'name': billGroupExpenses.typeName, 'value': billGroupExpenses.sumPrice}
              content.push(obj)
              transactionsData.push(billGroupExpenses.countPrice)
            }
            // 月度分类支出类型
            this.monthlyExpenditureClassification.legendData = title
            this.monthlyExpenditureClassification.seriesData = content
            // 支出笔数
            this.monthlyExpenditureClassificationTransactions.xAxisData = title
            this.monthlyExpenditureClassificationTransactions.seriesData = transactionsData
          }

          this.initMonthlyExpenditureClassification()
          this.initMonthlyExpenditureClassificationTransactions()

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 初始化月度收入分类情况
       */
      initMonthlyRevenueClassification(){
        let myChart = echarts.init(document.getElementById('monthlyRevenueClassification'));
        let option = {
          title: {
            text: '月度收入分类情况',
            subtext: '收入/元',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            data: this.monthlyRevenueClassification.legendData
          },
          series: [
            {
              name: '分类名称',
              type: 'pie',
              radius: '55%',
              center: ['40%', '50%'],
              data: this.monthlyRevenueClassification.seriesData,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        myChart.setOption(option)
      },
      /**
       * 月度收入分类情况
       */
      getMonthlyRevenueClassification(){
        http.get("/bill/getMonthlyRevenueClassification", {}).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          if (res.data){
            let title = []
            let content = []
            for (let billGroupExpenses of res.data){
              title.push(billGroupExpenses.typeName)
              let obj = {'name': billGroupExpenses.typeName, 'value': billGroupExpenses.sumPrice}
              content.push(obj)
            }
            this.monthlyRevenueClassification.legendData = title
            this.monthlyRevenueClassification.seriesData = content
          }

          this.initMonthlyRevenueClassification()

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 初始化月度统计
       */
      initMonthlyExpenditure(){
        let myChart = echarts.init(document.getElementById('monthlyExpenditure'));
        let option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            data: ['月收入', '月支出', '月支出笔数', '月收入笔数']
          },
          series: [
            {
              name: '详情',
              type: 'pie',
              selectedMode: 'single',
              radius: [0, '30%'],
              label: {
                position: 'inner',
                fontSize: 14
              },
              labelLine: {
                show: false
              },
              data: [
                { value: this.monthlyExpenditure.income, name: '月收入' },
                { value: this.monthlyExpenditure.expenditure, name: '月支出', selected: true }
              ]
            },
            {
              name: '笔数详情',
              type: 'pie',
              radius: ['45%', '60%'],
              labelLine: {
                length: 30
              },
              label: {
                formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                backgroundColor: '#F6F8FC',
                borderColor: '#8C8D8E',
                borderWidth: 1,
                borderRadius: 4,
                rich: {
                  a: {
                    color: '#6E7079',
                    lineHeight: 22,
                    align: 'center'
                  },
                  hr: {
                    borderColor: '#8C8D8E',
                    width: '100%',
                    borderWidth: 1,
                    height: 0
                  },
                  b: {
                    color: '#4C5058',
                    fontSize: 14,
                    fontWeight: 'bold',
                    lineHeight: 33
                  },
                  per: {
                    color: '#fff',
                    backgroundColor: '#4C5058',
                    padding: [3, 4],
                    borderRadius: 4
                  }
                }
              },
              data: [
                { value: this.monthlyExpenditure.expenditureNum, name: '月支出笔数' },
                { value: this.monthlyExpenditure.incomeNum, name: '月收入笔数' }
              ]
            }
          ]
        };
        myChart.setOption(option)
      },
      /**
       * 获取月度支出、收入以及笔数
       */
      getMonthlyExpenditure(){
        http.get("/bill/getMonthlyExpenditure", {}).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          if (res.data){
           this.monthlyExpenditure.data = res.data
           this.monthlyExpenditure.expenditureNum = res.data.expenditureNum
           this.monthlyExpenditure.incomeNum = res.data.incomeNum
           this.monthlyExpenditure.expenditure = res.data.expenditure
           this.monthlyExpenditure.income = res.data.income
          }
          this.initMonthlyExpenditure()

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
    },
    mounted(){
      this.getMonthlyExpenditure()
      this.getMonthlyRevenueClassification()
      this.getMonthlyExpenditureClassification()
      this.getMonthlyExpenditureTrend()
      this.getMonthlyExpenditurePerson()
    },
  }
</script>

<style scoped>

  .echarts-title {
    font-size: 16px;
    text-align: center;
    font-weight:900
  }

  .echarts-table {
    /*max-width: 600px;*/
    max-height: 550px;
    /*min-width: 600px;*/
    min-height: 550px;
  }

  .echarts-content{
    /*width: 600px;*/
    height: 550px;
  }

</style>
